<template>
    <el-tabs v-model="headNav" class="h_tab" :stretch="true">
        <el-tab-pane label="新歌" name="1"><router-link to="/"></router-link></el-tab-pane>
        <el-tab-pane label="排行" name="2"><router-link to="/rank"></router-link></el-tab-pane>
        <el-tab-pane label="歌单" name="3"><router-link to="/"></router-link></el-tab-pane>
        <el-tab-pane label="歌手" name="4"><router-link to="/"></router-link></el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
   data () {
     return {
        
     }
   },
   methods:{
       handleTabClick(tab){
           let pathArr = ['/','/rank','/plist','/singer'];
           let path = pathArr[tab - 1];
           this.$router.push({path: path});
       }
   },
   computed:{
       headNav :{
           get(){
               return this.$cookies.get('headNav') || this.$store.getters.headNav;
           },
           set(nav){
                this.$store.commit('setHeadNav', nav);
                this.handleTabClick(nav);
                this.$cookies.set('headNav', nav);
           }
       }
   }
}
</script>
<style lang="scss">
.h_tab{
    >div{margin: 0;}
}
</style>

